<template>
    <div id='tmpl'>
        <!--图片分类-->
        <div id="cate">
             <ul class="ul-list" v-bind="{style:'width:'+ulWidth+'px'}">
                 <!--点击全部获取所有图片-->
                <li @click='getimages(0)'>全部</li>
                <li v-for="(item,index) in cates" :key='index' @click='getimages(item.id)'>{{item.title}}</li>
            </ul>
        </div>
        <!--图片列表,使用mint组件中的Lazy load功能-->
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in list" :key='index'>
                    <!--为a标签绑定锚点值-->
                    <router-link v-bind='{to:"/photo/photoinfo/"+item.id}'>
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5 v-text='item.title'></h5>
                            <p v-text='item.zhaiyao'></p>
                        </div>
                    </router-link>          
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ulWidth:320,       //默认给ul的宽度设置为320px
            cates:[],          //用来储存标题
            list:[]            //用来储存图片数据
        }
    },
    created(){
        //获取图片分类数据
        this.gettitle();
        //加载图片数据
        var all = 0;    //默认表示获取所有数据
        this.getimages(all);
    },
    methods:{
        gettitle(){
            var url = this.$common.apidomain+'/api/getimgcategory';
            this.$http.get(url).then(function(response){
                var data = response.body;
                if(data.status !== 0){
                    this.$tip(data.message)
                    return;
                }
                this.cates = data.message;

                //实现当前分类数据所在ul的总宽度 = 分类个数*每个分类数据的宽度
                var w = 62;   //每个li标签的宽度
                var count = data.message.length + 1;   //+1是为了算上全部这个li标签的宽度
                this.ulWidth = count*w;
            })
        },
        getimages(cateId){
            //如果方法的cateId没有传递,则默认是0,代表获取所有图片
            cateId = cateId || 0;
            // 确定url  : http://182.254.146.100:8899/api/getimages/23
            var url = 'http://182.254.146.100:8899/api/getimages/'+cateId;
            this.$http.get(url).then(function(response){
                var data = response.body;
                if(data.status !== 0){
                    this.$tip(data.message);
                    return;
                }
                this.list = data.message;
            })
        }
    }
}
</script>
<style scoped>
    /*实现图片分类样式*/
    #cate{
        width: 375px;
        max-width:375px;
        overflow-x: auto;
    }
    .ul-list{
        padding-left:8px;     
        margin: 0px;  
    }
    .ul-list li{
        display: inline-block;
        list-style: none;
        color:#0094ff;
        font-size:14px;
        padding-left: 6px;
    }

    /*实现图片列表样式*/
    #imglist ul{
        padding-left: 0px;
    }
    #imglist li{
        list-style: none;
        position: relative;
        cursor:pointer;
    }
     #imglist li img{
         width: 100%;
         height: 300px;
     }
     #desc{
         width: 100%;
         background-color: rgba(0,0,0,.2);
         position: absolute;
         left:0;
         bottom:5px;
     }
     #desc h5{
         color:#fff;
         font-weight: bold;
     }
     #desc p{
         color:#fff;
     }
     image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>